import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import cx from 'classnames';
import { WingBlank, WhiteSpace, Flex, List, Button, Toast } from 'antd-mobile';
import styles from './styles.less';
import {SCALE_OLD, SCALE_NINE, SCALE_NINE_X} from 'const';

function ScaleTemplate({ dispatch, location, form, detail, ...rest }) {
  const { state, query } = location;

  const { getFieldProps, getFieldValue, setFieldsValue, validateFields } = form;
  // questions会遗留前一个测评的数据，运行会有BUG，这段代码兼容了这个问题
  let _questions;
  if(location.state.type === 'old' || location.state.title === '老年人体质辨识'){
      _questions = SCALE_OLD;
  }else if (location.state.type === 'nine' || location.state.title === '中医体质辨识') {
    if (location.state.gender == 1) {
      _questions = SCALE_NINE;
    }else{
      _questions = SCALE_NINE_X;
    }
  }

  function handleChange({ target: { type, name, value } }) {
    setFieldsValue({ [name]: value });
  }

  function submitHandler() {
    
    validateFields((err, values) => {
      // window.scrollTo(0, 0);
      const ret = [];
      Object.keys(values).forEach((key) => {
        if (!values[key]) {
          values[key] = 1;
        }
        ret.push(values[key]);
      });
      Toast.loading('正在加载');
      if (!err) {
        dispatch({
          type: 'scale/submitQuestions',
          payload: {
            type: query.type || state.type,
            patientId: query.memberid || state.patientid,
            patientValue: ret.join(''),
            ...rest,
          },
        });
      }
    });
  }

  const check = detail.patientValue;
  function isActive(key, value, i) {
    if (detail && detail.patientValue) {
      return check.split('')[i] === value;
    }

    if (!getFieldValue(key)) {
      return false;
    }

    return getFieldValue(key) === value;
  }

  return (
    <WingBlank size="md">
      <WhiteSpace />
      <List>
        <List.Item>
            <Flex justify="center" style={{marginTop: '0.1rem'}}>请根据一年来的体验和感觉，回答以下问题。</Flex>
        </List.Item>
        {_questions.map((question, i) => (
          <List.Item wrap multipleLine key={question.Id}>
            {`${i + 1}. ${question.Title}`}
            <List.Item.Brief>
              <Flex justify="between">
                {question.Choicekey.split('|').map((option, ii) => {
                  const value = question.Choicevalue.split('|')[ii];
                  const key = question.Id;
                  return (
                    <Flex.Item key={value}>
                      <label
                        className={cx(styles.questionOption, styles.questionOptionNormal, {
                          [styles.questionOptionActive]: isActive(key, value, i),
                        })}
                      >
                        <input {...getFieldProps(`${key}`)} type="radio" name={key} value={value} checked={isActive(key, value, i)} onChange={handleChange} />
                        {option}
                      </label>
                    </Flex.Item>
                  );
                })}
              </Flex>
            </List.Item.Brief>
          </List.Item>
        ))}
        {!Object.keys(detail).length
          ? <div>
            <WhiteSpace size="xl" />
            <WingBlank>
                <Button type="primary" onClick={submitHandler}>提交</Button>
              </WingBlank>
            <WhiteSpace size="xl" />
          </div>
          : null}
      </List>
      <WhiteSpace size="xl" />
    </WingBlank>
  );
}

export default connect(({ scale }) => ({ ...scale }))(createForm()(ScaleTemplate));
